<template>
    <div class="tabs6">
        <el-form :model="rule" :rules="rules" ref="forms" label-width="130px">
            <el-form-item>
                <span slot="label"><i style="color: #F56C6C;">*</i> 成衣尺寸</span>
                <el-input style="width: 250px" v-model="chengyiObject[x.id]" v-for="x in sizeData['成衣尺寸']" :key="x.id" placeholder="" @blur.native.capture="yanzhengChange(x.isBitian,x.min,x.max,chengyiObject[x.id])">
                    <span slot="prepend" v-show="x.isBitian==1" style="color: #F56C6C;margin-left: -10px">* </span>
                    <template slot="prepend">{{x.bodySizename}}</template>
                    <template slot="prepend"><span v-show="x.min!=='' && x.max!=='' && x.min!==null && x.max!==null">({{x.min}}-{{x.max}})</span></template>
                    <template slot="append">{{x.unit}}</template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <span slot="label"><i style="color: #F56C6C;"></i> 净体尺寸</span>
                <el-input v-model="chengyiObject[x.id]" v-for="x in sizeData['净体尺寸']" :key="x.id" placeholder="">
                    <span slot="prepend" v-show="x.isBitian==1" style="color: #F56C6C;margin-left: -10px">* </span>
                    <template slot="prepend">{{x.bodySizename}}</template>
                    <template slot="prepend"><span v-show="x.min!=='' && x.max!=='' && x.min!==null && x.max!==null">({{x.min}}-{{x.max}})</span></template>
                    <template slot="append">{{x.unit}}</template>
                </el-input>
            </el-form-item>

            <el-form-item label="" prop="sizeIds">
                <span slot="label"><i style="color: #F56C6C;"></i> {{istixingdata}}</span>
                <ul class="tixingData">
                    <li v-for="x in tixingTypeData">
                        <div class="ttl">{{x.sizeName}}</div>
                        <div>
                            <el-radio-group v-model="tixingRadioCheck[x.sizeName]" @change="(value) => radioChange(value,x.sizeName)">
                                <el-radio-button v-for="y in x.smallSizeInfo"
                                :key="y.id" :label="y.id"
                                :value="y.size1">
                                    <div><img :src="y.sizeImg1" alt=""></div>
                                    <strong>{{y.size1}}</strong>
                                </el-radio-button>
                            </el-radio-group>
                        </div>
                    </li>
                </ul>
            </el-form-item>

            <el-form-item label="备注" prop="liangtiRemark" >
                <el-input
                    :autosize="{ minRows: 6 }"
                    style="width: 550px;"
                    type="textarea"
                    v-model="rule.liangtiRemark"
                    placeholder="请输入内容"
                    maxlength="200"
                    show-word-limit
                >
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-upload
                        action=" https://api.nbyid.cn/mlcc/user/interface/uploadImage"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        :limit="3"
                        :file-list="fileList"
                        :class="{hidePlusUpload: this.fileList.length>=3}"
                        ref="upload">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>

<!--                <el-upload-->
<!--                list-type="picture-card"-->
<!--                :on-success="onSuccess"-->
<!--                :on-error="uploadError"-->
<!--                name="file"-->
<!--                accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.GIF,.BMP"-->
<!--                ref="uploadImg"-->
<!--                :file-list="fileList"-->
<!--                :limit="1"-->
<!--                :action="uploadUrl">-->
<!--                    <i slot="default" class="el-icon-plus"></i>-->
<!--                    <div slot="file" slot-scope="{file}">-->
<!--                    <img-->
<!--                        class="el-upload-list__item-thumbnail"-->
<!--                        :src="file.url" alt=""-->
<!--                    >-->
<!--                    <span class="el-upload-list__item-actions">-->
<!--                        <span-->
<!--                        class="el-upload-list__item-preview"-->
<!--                        @click="handlePictureCardPreview(file)"-->
<!--                        >-->
<!--                        <i class="el-icon-zoom-in"></i>-->
<!--                        </span>-->
<!--                        <span-->
<!--                        v-if="!disabled"-->
<!--                        class="el-upload-list__item-delete"-->
<!--                        @click="handleRemove(file)"-->
<!--                        >-->
<!--                        <i class="el-icon-delete"></i>-->
<!--                        </span>-->
<!--                    </span>-->
<!--                    </div>-->
<!--            </el-upload>-->
<!--            <el-dialog :visible.sync="dialogVisible">-->
<!--            <img width="100%" :src="dialogImageUrl" alt="">-->
<!--            </el-dialog>-->


            </el-form-item>
        </el-form>
        <div class="button_list">
            <button @click="Submits" v-if="this.$store.state.OrderUser.isType != 1">订单预览</button>
<!--            <button @click="openSaves">保存产品</button>-->
            <button @click="Saves">保存产品</button>
        </div>
        <div class="zhezhao" :class="zhezhaoOpen" @click="toggle"></div>
        <div :class="zhezhaoOpen" class="buy_wrap">
            <div class="buy">
                <div class="title">保存产品</div>
                <el-form :model="rule2" :rules="rules2" label-width="90px">
                    <el-form-item label="产品名称">
                        <el-input v-model="rule2.productName" placeholder="请填写产品名称" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div class="button">
                    <button class="delete" @click="toggle">取消</button>
                    <button class="edit" @click="Saves">保存</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    name: 'Tabs4',
    props:['switch'],
    data() {
        return{
            inputnum:0,
            istixingdata:'体型数据',
            tabsList:[],
            tabOneDataList: {},//tabsOne内的单选组数据
            tabOneActive:'',//导航栏1状态激活
            tixingTypeData: [],//体型数据
            tixingOptionData: [],//体型分类数据
            sizeData: [], //成衣尺寸，净体尺寸
            uploadUrl: process.env.VUE_APP_API + 'user/interface/uploadImage',//图片上传api
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            fileList: [],
            states: true,//true重新绑定
            chengyiObject: this.$store.state.OrderUser.EditbodySizeIds,//成衣选中数据集
            rule: this.$store.state.OrderUser.Order_user_Info_temp,
            rules: {
                bodySizeIds: [{ required: true, message: '请填写' }],
            },
            rule2: this.$store.state.OrderUser.Order_user_Info_temp,
            rules2: {
                productName: [{ required: true, message: '请填写' }]
            },
            tixingRadioCheck: this.$store.state.OrderUser.EditsizeIds,//体型选中数据集
            bitian:['前长','后长','胸围','腰围','下摆','肩宽','左袖长','右袖长','身高','体重','年龄'],
            zhezhaoOpen: 'close',
        }
    },
    computed: {
        getTypeids() {
            return this.$store.getters.getOrder_user_category_id();
        },
        sSwitch() {
            return this.switch;
        },
        getChecked() {
            return this.$store.state.OrderUser.Order_user_Info_temp.id;
        }
    },
    created() {
        this.tabOpenBind();
        this.fileList = [];
        let imgStr = this.$store.state.OrderUser.Order_user_Info_temp.liangtiImgs;
        if (!!imgStr) {
            this.fileList = imgStr.split(',').filter(item => item).map(item=> ({url:item}));
        }
    },
    methods: {
        yanzhengChange(isbitian,min,max,inputvalue){//验证
            // 判断是否要判断范围
            let is_limit_min = min !== null && min !== '' && min !== undefined;
            let is_limit_max = max !== null && max !== '' && max !== undefined;
            this.inputnum = inputvalue*1;
            max = max*1;
            min = min*1;
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            // if(isbitian=='1'){
            //     if(inputvalue==null || inputvalue==undefined || inputvalue==''){
            //         this.$message.warning("该项是必填项,请输入尺寸")
            //         return
            //     }else if(!reg.test(this.inputnum)){
            //         this.$message.warning("请输入正确的尺寸")
            //         return
            //     }
            //     else {
            //         if(this.inputnum>max){
            //             // alert(this.inputnum)
            //             this.$message.warning(this.inputnum+"该项最大值不能超过"+max)
            //             return
            //         }else {
            //             if(this.inputnum<min){
            //                 this.$message.warning("该项最小值不能小于"+min)
            //                 return
            //             }
            //         }
            //     }
            // }
            // 必填时判断是否填写
            if(isbitian=='1'){
                if(inputvalue==null || inputvalue==undefined || inputvalue==''){
                    this.$message.warning("该项是必填项,请输入尺寸")
                    return
                }
            }
            // 有值时判断输入的值是否合理
            if(inputvalue!==null && inputvalue!==undefined && inputvalue!==''){
                if(!reg.test(this.inputnum)){
                    this.$message.warning("请输入正确的尺寸")
                    return
                }
                //如果有范围、判断是否在范围内
                if (is_limit_min && this.inputnum<min){
                    this.$message.warning("该项最小值不能小于"+min)
                    return
                }
                if(is_limit_max && this.inputnum>max){
                    this.$message.warning(this.inputnum+"该项最大值不能超过"+max)
                    return
                }
            }
        },
        show_productname(){
            let params = new FormData();
            params.append("category_ids", this.$store.getters.getOrder_user_category_id());
            this.$http.post('logic/interface/query_productName_categoryids',params).then( async(result) => {
                // alert(result.data.data)
                this.rules2.productName=result.data.data
                this.$store.state.OrderUser.Order_user_Info_temp.productName=result.data.data;
            });
        },
        async tabOpenBind() {
            if(!this.states) {
                return false;
            }
            console.log(this.$store.state.OrderUser.EditbodySizeIds)
            this.states = false;
            let params = new FormData();
            params.append("template_id", 5);
            params.append("is_jin", 0);
            params.append("category_ids", this.$store.getters.getOrder_user_category_id());
            await this.$http.post('logic/interface/query_bodySizeinfo',params).then( async(result) => {
                Vue.set(this.sizeData,'成衣尺寸',result.data.data);
            });

            let params3 = new FormData();
            params3.append("template_id", 5);
            params3.append("is_jin", 1);
            params3.append("category_ids", this.$store.getters.getOrder_user_category_id());
            await this.$http.post('logic/interface/query_bodySizeinfo',params3).then( async(result) => {
                Vue.set(this.sizeData,'净体尺寸',result.data.data);
            });

            let params2 = new FormData();
            params2.append("template_id", 5);
            params2.append("category_ids", this.$store.getters.getOrder_user_category_id());
            await this.$http.post('/logic/interface/query_sizeinfo',params2).then( async(result) => {
                this.tixingTypeData = result.data.data;
                if(result.data.code==0){
                    this.istixingdata='体型数据';
                }else {
                    this.istixingdata='';
                }
            });

            // let params5 = new FormData();
            // params5.append("category_ids", this.$store.getters.getOrder_user_category_id());
            // await this.$http.post('logic/interface/query_productName_categoryids',params5).then( async(result) => {
            //     this.rules2.productName=result.data.data
            //     // alert(result.data.data)
            //     // Vue.set(this.rules2.productName,result.data.data);
            // });

            this.fileList = [];
            let imgStr = this.$store.state.OrderUser.Order_user_Info_temp.liangtiImgs;
            if (!!imgStr) {
                this.fileList = imgStr.split(',').filter(item => item).map(item=> ({url:item}));
            }
            // console.log(imgList, imgStr.split(','), this.fileList)
            // if(!!this.$store.state.OrderUser.Order_user_Info_temp.liangtiImgs) {
            //     this.fileList.push({url: this.$store.state.OrderUser.Order_user_Info_temp.liangtiImgs})
            // }
        },
        async tabsOneRadioChange(val) {
            //监听单选按钮组选中变化，适用于单选变化后，下级全部重新请求且做数组第一项默认
            let category_ids = '';
            for(let i=0;i<this.tabsList.length;i++) {
                if(val >= i) {
                    //存储靶向上级已经单选的id
                    category_ids += ',' + this.tabsList[i].unit;
                }else {
                    //靶向下级重新请求数据
                    await this.$http.post('logic/interface/query_categoryinfo',{template_id:this.tabsList[i].id,category_ids:category_ids.substr(1,category_ids.length)}).then(result => {
                        Vue.set(this.tabOneDataList,this.tabsList[i].parameter,result.data.data)
                        //默认选中第一个
                        if(result.data.data.length > 0) {
                            this.tabsList[i].unit = result.data.data[0].id;
                            category_ids += ',' + this.tabsList[i].unit;
                        }else {
                            this.tabsList[i].unit = undefined;
                        }
                    });
                }
            }
        },

        handleRemove(file, fileList) {
            // console.log(file, fileList);
            // this.$refs.uploadImg.clearFiles();
            let delIndex = this.fileList.findIndex(item => item.url === file.url);
            if (delIndex !== -1) {
                this.fileList.splice(delIndex, 1);
                this.setLiangtiImgs();
            }
        },
        //上传图片成功函数
        handleSuccess(response,file, fileList) {
            var result = response;
            // console.log('file', result, 'file', file)
            if (result.data && result.data != '') {
                this.fileList.push({url: result.data})
            }

            this.setLiangtiImgs();
            // this.dialogImageUrl = result.data+"";
            // this.rule.liangtiImgs = result.data+"";
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        setLiangtiImgs(){
            this.rule.liangtiImgs = this.fileList.map(item => item.url).join(",");
            // console.log(this.rule.liangtiImgs, 'sss', this.fileList)
            // this.rule.liangtiImgs = this.fileList.map(item.item);
        },
        // handleRemove(file) {
        //     this.$refs.uploadImg.clearFiles();
        // },
        // handlePictureCardPreview(file) {
        //     this.dialogImageUrl = file.url;
        //     this.dialogVisible = true;
        // },
        // onSuccess(res,file,fileList) {
        //     if(res.code == 0) {
        //         this.rule.liangtiImgs = res.data;
        //     }else {
        //         this.$message({
        //             message: '上传失败',
        //             type:'error'
        //         });
        //     }
        // },
        // uploadError(err) {
        //     this.$message({
        //         message:err,
        //         type: 'error'
        //     });
        // },
        radioChange(value,tname) {//体型选择事件
            Vue.set(this.tixingRadioCheck,tname,value);
            let arr = '';
            for(let x in this.tixingRadioCheck) {
                if(arr == '') {
                    arr = this.tixingRadioCheck[x];
                }else {
                    arr += ',' + this.tixingRadioCheck[x];
                }
            }
            this.rule.sizeIds = arr;
        },
        Submits() {
            //过滤文本框内容，拼接成参数要求
            this.$refs['forms'].validate(valid => {
                if(valid) {
                    this.$store.commit('postOrder_user_product_update',0);
                    // this.$store.commit('postOrder_user_product_update',0);
                    this.$router.push('./view/'+this.$store.state.OrderUser.Order_user_InfoData.orderSn);
                }else {
                    // this.$message({
                    //     message: '请填写或选择非空项',
                    //     type:'error'
                    // });
                    this.$message.error("请填写或选择非空项")
                }
            })
        },
        openSaves() {
            this.show_productname();
            this.zhezhaoOpen = 'open';
        },
        Saves() {
            //缺bodySizeIds，liangtiImgs
            //过滤文本框内容，拼接成参数要求
            this.$refs['forms'].validate(valid => {
                if(valid) {
                    if(this.$store.state.OrderUser.isType == 0) {
                        this.$store.commit('postOrder_user_product_update',0);
                    }else if(this.$store.state.OrderUser.isType == 1) {
                        this.$store.commit('postOrder_user_product_update',0);
                        this.$store.commit('saveOrderUserTemplate');
                    }
                    // this.$message({
                    //     message:'保存成功',type:'success'
                    // })
                    this.$message.success("保存成功")
                }else {
                    this.$message.error("请填写或选择非空项")
                    // this.$message({
                    //     message: '请填写或选择非空项',
                    //     type:'error'
                    // });
                }
            });
            this.zhezhaoOpen = 'close';
        },
        toggle() {
            this.zhezhaoOpen = 'close';
        }
    },
    watch: {
        getTypeids() {
            this.states = true;
        },
        sSwitch(active) {
            if(active == 5) {
                this.tabOpenBind();
            }
        },
        getChecked() {
            this.chengyiObject = this.$store.state.OrderUser.EditbodySizeIds
            this.tixingRadioCheck = this.$store.state.OrderUser.EditsizeIds
            this.tabOpenBind();
        }
    },
}
</script>

<style scoped lang="scss">

.tabs6 /deep/ form .hidePlusUpload .el-upload--picture-card {display: none; }
.tabs6 /deep/ form .el-input{ width: 220px; margin: 0 15px 15px 0;}
.tabs6 /deep/ form .el-input input{padding-right: 40px; border-radius: 0 4px 4px 0;}
.tabs6 /deep/ form .el-input-group__prepend{ background: #000000; font-weight: 400; color: $color;}
.tabs6 /deep/ form .el-input .el-input-group__append{padding: 0;
    position: absolute; width: 10px; font-size: 12px; color: #000000;
    top: 11px;
    right: 17px;
    border: none;
    background-color: inherit;}
.tixingData{ display: flex; flex-wrap: wrap;height: 450px}
.tixingData li{ width: 340px; margin-right: 20px;}
.tixingData li /deep/ .el-radio-group label{position: relative; width: 102px; margin-right: 10px!important;}
.tixingData li /deep/ .el-radio-button__inner{padding: 0; border-radius:0!important; border: 1px solid #DCDFE6;display: block;}
.tixingData li /deep/ .el-radio-group input[type=radio]:checked + .el-radio-button__inner{
    background: #ffffff; border-color:$color; color: $font_color;box-shadow:0 0 0 0 $color;}
.tixingData li label img{ width: 100px; height: 135px; margin: 0 auto;}
.tixingData li /deep/ .el-radio-button__inner strong{font-size: 12px; font-weight: inherit; display: inline-block;
    background: #EAEAEA; padding: 5px 12px; border-radius: 5px; margin:7px 0;}
.tixingData li /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner strong{background: $color; font-weight: bold;}

.button_list{ padding-left: 120px;}
.button_list button{background: #000000; padding: 10px 30px; border-radius: 5px; border: none;
    font-weight: bold; font-size: 14px; cursor: pointer; margin-right: 25px; color: $color;}

.buy_wrap{position: relative; height: 100%;}
.buy_wrap.open .buy{transition: all .7s ease-out;}
.buy_wrap.close .buy{top: 100px; visibility: hidden;}
.buy_wrap .buy{background: #ffffff; z-index: 999; position: absolute; top:-380px;left: 30%; padding: 20px 30px;
border-radius: 5px; width: 450px;}
.buy_wrap .buy .el-input{width: 240px;}
.buy_wrap .buy .title{ margin: 0px 0 20px 0px; border-left: 5px solid #000000; padding-left: 15px;font-size: 16px;}
.buy_wrap .buy .button{float: right;}
.buy_wrap .buy button{ border:none; width: 100px; height: 40px; line-height: 40px; border-radius: 5px; margin-left: 20px; cursor: pointer;}
.buy_wrap .buy .edit{ background: #000000; color: #FFFFFF;}
.buy_wrap .buy .delete{background: #EAEAEA;}

</style>
